<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        h1 {
            text-align: center
        }

        table {
            margin: 0 auto;
            width: 60%;
            border: 2px solid #09C;
            border-collapse: collapse
        }

        table th,
        table td {
            border: 2px solid #09C;
            padding: 5px;

        }

        th {
            background-color: #0CC;
        }
    </style>
</head>

<body>
    <h1>真划算</h1>
    <table>
        <tr>
            <th>商品</th>
            <th>单价(元)</th>
            <th>颜色</th>
            <th>库存</th>
            <th>好评率</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>罗技M185鼠标</td>
            <td>80</td>
            <td>黑色</td>
            <td>893</td>
            <td>98%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_cart(this);" />
            </td>
        </tr>
        <tr>
            <td>微软X470键盘</td>
            <td>150</td>
            <td>黑色</td>
            <td>9028</td>
            <td>96%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_cart(this);" />
            </td>
        </tr>
        <tr>
            <td>蓝牙耳机</td>
            <td>100</td>
            <td>蓝色</td>
            <td>8937</td>
            <td>95%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_cart(this);" />
            </td>
        </tr>
        <tr>
            <td>金士顿U盘</td>
            <td>70</td>
            <td>红色</td>
            <td>482</td>
            <td>100%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_cart(this);" />
            </td>
        </tr>
    </table>

    <h1>购物车</h1>
    <table>
        <thead>
            <tr>
                <th>商品</th>
                <th>单价(元)</th>
                <th>数量</th>
                <th>金额(元)</th>
                <th>删除</th>
            </tr>
        </thead>
        <tbody id="goods">
            <!-- <tr>
                <td>罗技M185鼠标</td>
                <td>80</td>
                <td align="center">
                    <input type="button" value="-" onclick="decrease(this)" />
                    <input type="text" size="3" readonly value="1" />
                    <input type="button" value="+" onclick="increase(this)" />
                </td>
                <td>80</td>
                <td align="center"><input type="button" value="x"  onclick="del(this)" /></td>
            </tr> -->
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3" align="right">总计</td>
                <td id="total"></td>
                <td></td>
            </tr>
        </tfoot>
    </table>
    <script>
        let cart = {}
        function add_cart(btn) {
            const tr = btn.parentNode.parentNode
            let tds = tr.children
            const name = tds[0].innerText
            const price = +tds[1].innerText

            if (cart[name]) {
                let row = findByGoodsName(name)
                let quantity = row.children[2].children[1].value
                let price = +row.children[1].innerText
                row.children[2].children[1].value = ++quantity
                row.children[3].innerText = quantity * price              
            } else {
                cart[name] = 1
                const row = document.createElement('tr')
                row.innerHTML = `
                <td>${name}</td>
                <td>${price}</td>
                <td align="center">
                    <input type="button" value="-" onclick="decrease(this)" />
                    <input type="text" size="3" readonly value="1" />
                    <input type="button" value="+" onclick="increase(this)" />
                </td>
                <td>${price}</td>
                <td align="center"><input type="button" value="x"  onclick="del(this)" /></td>
            `
                document.querySelector('#goods').appendChild(row)
            }

            calcTotalValue()
        }

        function findByGoodsName(name){
            const goods = document.querySelector('#goods')
            let trs = goods.children
            let result
            for (const tr of trs) {
                if(tr.children[0].innerText == name){
                    result = tr
                    break
                }
            }
            return result
        }

        function del(btn) {
            let tr = btn.parentNode.parentNode
            const name = tr.children[0].innerText                       
            tr.remove()
            
            delete cart[name]
            calcTotalValue()
        }

        function increase(btn) {
            let input = btn.previousElementSibling;
            let quantity = +input.value
            input.value = ++quantity

            const tr = btn.parentNode.parentNode
            const price = tr.children[1].innerText

            tr.children[3].innerHTML = quantity * price
            calcTotalValue()
        }

        function decrease(btn) {
            const tr = btn.parentNode.parentNode
            let input = btn.nextElementSibling;
            let quantity = +input.value

            if (quantity <= 1) {
                const name = tr.children[0].innerText 
                tr.remove()
                delete cart[name]
                return
            }

            input.value = --quantity

            const price = tr.children[1].innerText

            tr.children[3].innerHTML = quantity * price
            calcTotalValue()
        }

        function calcTotalValue() {
            const goods = document.querySelector('#goods')
            let trs = goods.children
            let result = 0
            for (const tr of trs) {
                result += +(tr.children[3].innerText)
            }
            document.querySelector('#total').innerText = result
        }
    </script>
</body>

</html>